<template>
    <el-tabs v-model="param.tablestatus" class="tab1" @tab-change="getList(1)">
        <el-tab-pane label="赛事信息" :name="1"> </el-tab-pane>
        <el-tab-pane label="比赛名单" :name="2"> </el-tab-pane>
    </el-tabs>
    <div class="list1 function10" v-if="param.tablestatus == 1" v-loading="loading">

        <ul class="function3_ul1">
            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">赛事名称：</p>
                <p class="function3_ul1_li1_content1">{{ info.title }}</p>
            </li>
            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">赛事类型：</p>
                <p class="function3_ul1_li1_content1">{{ info.title }}</p>
            </li>
            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">赛制：</p>
                <p class="function3_ul1_li1_content1">{{ info.format }}</p>
            </li>
            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">人员类型：</p>
                <p class="function3_ul1_li1_content1">{{ info.personnelType }}</p>
            </li>

            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">参赛年龄：</p>
                <p class="function3_ul1_li1_content1">{{ info.age }}</p>
            </li>
            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">开赛时间：</p>
                <p class="function3_ul1_li1_content1">{{ info.kickOffTime }}</p>
            </li>

            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">比赛场地：</p>
                <p class="function3_ul1_li1_content1">{{ info.address }}</p>
            </li>
            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">报名开始时间：</p>
                <p class="function3_ul1_li1_content1">{{ info.startTime }}</p>
            </li>
            <li class="function3_ul1_li1">
                <p class="function3_ul1_li1_title1">报名结束时间：</p>
                <p class="function3_ul1_li1_content1">{{ info.endTime }}</p>
            </li>

            <li class="function3_ul1_li2">
                <p class="function3_ul1_li2_title1">赛事logo：</p>
                <div class="function3_ul1_li2_content1">

                    <img class="function1_content1_li2_img" @click="imgShow = true; showImg = info.logo" :src="info.logo"
                        alt="">
                </div>
            </li>
        </ul>
        <el-dialog v-model="imgShow" width="760px">
            <img class="ww100" :src="showImg" alt="">
        </el-dialog>

    </div>


    <div class="list1" v-if="param.tablestatus == 2" v-loading="loading">

        <el-table ref="selectTable" :data="list2">
            <el-table-column prop="title" min-width="120" label="赛场轮次"></el-table-column>

            <el-table-column prop="ownTeamName" min-width="120" label="甲方球队名称"></el-table-column>
            <el-table-column prop="rivalTeamName" min-width="120" label="乙方球队名称"></el-table-column>

            <el-table-column prop="isHaveImg" min-width="120" label="比赛名单">
                <template #default="scope">
                    {{ status[scope.row.isHaveImg] }}
                </template>



            </el-table-column>
            <el-table-column prop="num" min-width="120" label="场次"></el-table-column>
            <!-- <el-table-column prop="remarksImg" min-width="120" label="比赛名单图片"></el-table-column> -->
            <!-- <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                       <el-button @click="$router.push('/xiehuixiangqing/'+scope.row.userId)" text
                            type="primary">详情</el-button>
                        <el-divider class="list1_operate1_line1" direction="vertical" />
                        <el-button @click="tanchuang1(scope.row,3)" text type="primary">删除</el-button>
                        <el-divider class="list1_operate1_line1" direction="vertical" /> 
                    </div>
                </template>
            </el-table-column> -->
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            id: this.$route.params.id,
            param: {},
            list1: [],
            list2: [],
            info: {},
            imgShow: false,
            param: {
                pageNumber: 1,
                pageSize: 10,
                tablestatus: 1,
            },
            loading: false,
            total: 0,
            status: { 0: '没有', 1: '有' },
        }
    },

    created() {
        this.getList()
        this.getData()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        rewrite() {
            let that = this;
            let obj = {
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
                tablestatus: that.param.tablestatus
            }
            that.param = obj;
        },


        tanchuang400lab0(val, status) {
            let that = this;
            this.$msgbox.confirm(
                " ",
                "你确认通过",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                this.$api.audit({ authenticationId: val.authenticationId, status: status }).then(res => {
                    console.log(res);
                    if (res) {
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => { });
        },


        tanchuang400lab1(val, status) {
            let that = this;
            this.$msgbox.confirm(
                " ",
                "你确认拒绝",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                this.$api.audit({ authenticationId: val.authenticationId, status: status }).then(res => {
                    console.log(res);
                    if (res) {
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => { });
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
        tanchuang1(val, status) {
            let that = this;
            this.$msgbox.confirm(
                " ",
                "你确认要删除吗",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                this.$api.delluser({ userId: val.userId, userId: status }).then(res => {
                    console.log(res);
                    if (res) {
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => { });
        },
        getData() {
            let that = this;
            that.fullscreenLoading = true;
            that.$api.competitiondetail({ matchId: this.id }).then(res => {
                if (res) {
                    that.info = res;
                }
                that.fullscreenLoading = false;
            })

        },
        async getList(pageNumber) {
            this.loading = true;
            let res;
            if (pageNumber) {
                this.param.pageNumber = pageNumber;

            }

            this.param.matchId = this.id;
            res = await this.$api.competitionTeamList(this.param);

            if (res) {
                let url = 'list' + this.param.tablestatus
                this[url] = res.records
                this.total = res.total;
            }
            this.loading = false;
        },


    }

}


</script>
<style lang="scss" scoped>
.manage1 {
    padding: 10px 20px 10px;
    background-color: #fff;
    text-align: left;

    .manage1_from1 {
        background: #F2F3F5;
        padding: 24px 16px 4px;
        text-align: left;

        .manage1_from1_input1 {
            width: 250px
        }

        .manage1_from1_input2 {
            width: 110px;
            margin-right: 10px;
        }

        .manage1_from1_input3 {
            width: 110px;
            margin-left: 10px;
        }

        .manage1_from1_select1 {
            width: 250px
        }

        .manage1_from1_time1 {
            width: 110px
        }

        .manage1_from1_button1 {
            width: 115px;
        }
    }

}

.tab1 {
    background-color: #fff;
    margin-top: 10px;
}

.list1 {
    background-color: #fff;

    .list1_head1 {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .list1_operate1 {
        width: 100%;
        display: flex;
        justify-content: center;

        .list1_operate1_line1 {
            margin: auto 10px;
        }
    }

    .list1_page1 {
        height: 70px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .list1_page1_title1 {
            font-size: 10px;
            color: #A4A4A4;
        }
    }
}

.function10 {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;

    .function3_title1 {
        background: #F7F8FA;
        padding: 0 18px;
        line-height: 48px;
        color: #1D1D1D;
        font-size: 14px;
        margin-top: 14px;
        text-align: left;
    }

    .function3_ul1 {
        color: #414142;
        display: flex;
        flex-wrap: wrap;
        padding: 26px 20px 16px;

        .function3_ul1_li1 {
            display: flex;
            margin-top: 20px;
            margin-right: 20px;

            .function3_ul1_li1_title1 {
                font-size: 14px;
                color: #989898;
            }

            .function3_ul1_li1_content1 {
                font-size: 14px;
                color: #333333;
            }


        }

        .function3_ul1_li2 {
            margin-top: 20px;
            width: 100%;
            display: flex;

            .function3_ul1_li2_title1 {
                font-size: 14px;
                color: #989898;
            }

            .function3_ul1_li2_content1 {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .function3_ul1_li2_content1_img1 {
                    width: 120px;
                    margin-right: 20px;
                }
            }
        }

        .function3_ul1_li3 {
            margin-top: 20px;
            display: flex;

            .function3_ul1_li3_title1 {
                font-size: 14px;
                color: #989898;
            }

            .function3_ul1_li3_content1 {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .function3_ul1_li3_content1_li {
                    width: 100%;
                    display: inline-block;
                    font-size: 14px;
                    color: #333;
                    text-align: left;
                }
            }
        }
    }
}
</style>